<template>
  <main>
    <van-nav-bar :title="route.query.name" left-arrow @click-left="onClickLeft" />
    <div class="art-box">
      <div class="art-boxleft">
        <img src="@/assets/jl.png" alt="jl" class="img" />
      </div>
      <div class="art-boxright">
        <p>产品设计从入门到放弃</p>
        <ul>
          <li>
            <div>
              <el-progress status="exception" :percentage="50" style="width: 200px">
                <el-button text>已学20%</el-button>
              </el-progress>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </main>
</template>
<script setup>
import { useRouter,useRoute } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const route = useRoute();
const onClickLeft = () => { 
  router.push("/learn");
};
console.log(route.query.name);
</script>
<style lang="less" scoped>
.art-box {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;

  .art-boxleft {
    width: 120px;
    height: 75px;
    background-color: #666ee8;
    text-align: center;
    line-height: 75px;
    border-radius: 10px;

    .img {
      width: 76px;
      height: 65px;
      align-items: center;
      vertical-align: middle;
    }
  }

  .art-boxright {
    width: 215px;
    height: 75px;
    border-radius: 10px;
    p {
      font-size: 14px;
    }
    ul {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      position: relative;
      top: 25px;
      color: #999999;
    }
  }
}
</style>